<template>
    <PageWrapper title="动态表单示例">
        <div class="mb-4">
            <a-button @click="changeLabel3" class="mr-2">更改字段3label</a-button>
            <a-button @click="changeLabel34" class="mr-2">同时更改字段3,4label</a-button>
            <a-button @click="appendField" class="mr-2">往字段3后面插入字段10</a-button>
            <a-button @click="deleteField" class="mr-2">删除字段11</a-button>
        </div>
        <CollapseContainer title="动态表单示例,动态根据表单内其他值改变">
            <BasicForm @register="register" />
        </CollapseContainer>

        <CollapseContainer class="mt-5" title="componentProps动态改变">
            <BasicForm @register="register1" />
        </CollapseContainer>
    </PageWrapper>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
import { CollapseContainer } from '/@/components/Container/index';
import { PageWrapper } from '/@/components/Page';

const schemas: FormSchema[] = [
    {
        field: 'field1',
        component: 'Input',
        label: '字段1',
        colProps: {
            span: 8,
        },
        show: ({ values }) => {
            return !!values.field5;
        },
    },
    {
        field: 'field2',
        component: 'Input',
        label: '字段2',
        colProps: {
            span: 8,
        },
        ifShow: ({ values }) => {
            return !!values.field6;
        },
    },
    {
        field: 'field3',
        component: 'DatePicker',
        label: '字段3',
        colProps: {
            span: 8,
        },
        dynamicDisabled: ({ values }) => {
            return !!values.field7;
        },
    },
    {
        field: 'field4',
        component: 'Select',
        label: '字段4',
        colProps: {
            span: 8,
        },
        dynamicRules: ({ values }) => {
            return values.field8 ? [{ required: true, message: '字段4必填' }] : [];
        },
        componentProps: {
            options: [
                {
                    label: '选项1',
                    value: '1',
                    key: '1',
                },
                {
                    label: '选项2',
                    value: '2',
                    key: '2',
                },
            ],
        },
    },
    {
        field: 'field11',
        component: 'DatePicker',
        label: '字段11',
        colProps: {
            span: 8,
        },
    },
    {
        field: 'field5',
        component: 'Switch',
        label: '是否显示字段1(css控制)',
        colProps: {
            span: 8,
        },
        labelWidth: 200,
    },
    {
        field: 'field6',
        component: 'Switch',
        label: '是否显示字段2(dom控制)',
        colProps: {
            span: 8,
        },
        labelWidth: 200,
    },
    {
        field: 'field7',
        component: 'Switch',
        label: '是否禁用字段3',
        colProps: {
            span: 8,
        },
        labelWidth: 200,
    },
    {
        field: 'field8',
        component: 'Switch',
        label: '字段4是否必填',
        colProps: {
            span: 8,
        },
        labelWidth: 200,
    },
];

const schemas1: FormSchema[] = [
    {
        field: 'f1',
        component: 'Input',
        label: 'F1',
        colProps: {
            span: 12,
        },
        labelWidth: 200,
        componentProps: ({ formModel }) => {
            return {
                placeholder: '同步f2的值为f1',
                onChange: (e: ChangeEvent) => {
                    formModel.f2 = e.target.value;
                },
            };
        },
    },
    {
        field: 'f2',
        component: 'Input',
        label: 'F2',
        colProps: {
            span: 12,
        },
        labelWidth: 200,
        componentProps: { disabled: true },
    },
    {
        field: 'f3',
        component: 'Input',
        label: 'F3',
        colProps: {
            span: 12,
        },
        labelWidth: 200,
        // @ts-ignore
        componentProps: ({ formActions }) => {
            return {
                placeholder: '值改变时执行查询,查看控制台',
                onChange: async () => {
                    const { validate } = formActions;
                    // tableAction只适用于在表格内开启表单的例子
                    // const { reload } = tableAction;
                    const res = await validate();
                    console.log(res);
                },
            };
        },
    },
];

export default defineComponent({
    components: { BasicForm, CollapseContainer, PageWrapper },
    setup() {
        const [register, { setProps, updateSchema, appendSchemaByField, removeSchemaByFiled }] =
            useForm({
                labelWidth: 120,
                schemas,
                actionColOptions: {
                    span: 24,
                },
            });
        const [register1] = useForm({
            labelWidth: 120,
            schemas: schemas1,
            actionColOptions: {
                span: 24,
            },
        });
        function changeLabel3() {
            updateSchema({
                field: 'field3',
                label: '字段3 New',
            });
        }
        function changeLabel34() {
            updateSchema([
                {
                    field: 'field3',
                    label: '字段3 New++',
                },
                {
                    field: 'field4',
                    label: '字段4 New++',
                },
            ]);
        }

        function appendField() {
            appendSchemaByField(
                {
                    field: 'field10',
                    label: '字段10',
                    component: 'Input',
                    colProps: {
                        span: 8,
                    },
                },
                'field3',
            );
        }
        function deleteField() {
            removeSchemaByFiled('field11');
        }
        return {
            register,
            register1,
            schemas,
            setProps,
            changeLabel3,
            changeLabel34,
            appendField,
            deleteField,
        };
    },
});
</script>
